<template>
  <div id="app">
    
    <van-nav-bar v-show="getIsShowBack" safe-area-inset-top @click-left="back" :title="gettitle"   left-arrow />
    <keep-alive :exclude="['novel', 'reader', 'history']" :key="key">
      <router-view />
    </keep-alive>

    <van-tabbar :placeholder="true" v-show="!$store.getters.gethomeshow" route>
      <van-tabbar-item replace to="/">
        <template #icon>
          <div>
            <svg
              t="1668791268049"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3292"
              width="20"
              height="20"
            >
              <path
                d="M512 1024c-56.096-89.344-97.184-137.728-123.296-145.184C201.216 825.248 64 652.672 64 448 64 200.576 264.576 0 512 0s448 200.576 448 448c0 203.168-135.232 374.72-320.608 429.632-26.88 7.968-69.376 56.768-127.392 146.368zM236.032 180.544A64 64 0 0 0 192 241.344v344.64a32 32 0 0 0 42.08 30.4c42.592-14.112 76-21.184 100.16-21.184 31.584 0 79.008 12.096 142.208 36.256v-435.2C413.248 172.096 365.824 160 334.208 160c-23.776 0-56.512 6.848-98.176 20.544z m-22.464 456.032a32 32 0 0 0-21.568 30.24v7.328a21.12 21.12 0 0 0 27.872 20c49.472-16.64 87.584-24.96 114.336-24.96 26.784 0 64.896 8.32 114.368 24.96a21.12 21.12 0 0 0 27.84-20v-7.328a32 32 0 0 0-21.536-30.24c-52.544-18.112-92.768-27.168-120.64-27.168-27.904 0-68.16 9.056-120.64 27.168z m355.552 0a32 32 0 0 0-21.568 30.24v7.328a21.12 21.12 0 0 0 27.872 20c49.472-16.64 87.584-24.96 114.368-24.96 26.752 0 64.864 8.32 114.336 24.96a21.12 21.12 0 0 0 27.872-20v-7.328a32 32 0 0 0-21.568-30.24c-52.544-18.112-92.768-27.168-120.64-27.168-27.904 0-68.16 9.056-120.64 27.168z m-21.568-440.32v435.2c63.2-24.16 110.624-36.256 142.24-36.256 24.128 0 57.536 7.04 100.16 21.184a32 32 0 0 0 42.048-30.4V241.376a64 64 0 0 0-44.032-60.8C746.304 166.848 713.6 160 689.792 160c-31.616 0-79.04 12.096-142.24 36.256zM512 704c19.648 0 35.552-113.664 35.552-253.856 0-140.224-15.904-253.888-35.552-253.888s-35.552 113.664-35.552 253.888c0 140.192 15.904 253.856 35.552 253.856z"
                p-id="3293"
                fill="#b550ff"
              ></path>
            </svg>
          </div>
        </template>
        Bookstore</van-tabbar-item
      >
      <van-tabbar-item replace to="/bookshelf/my">
        <template #icon>
          <div>
            <svg
              t="1668791056926"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2791"
              width="20"
              height="20"
            >
              <path
                d="M659.655431 521.588015q23.970037-6.71161 46.022472-13.423221 19.17603-5.752809 39.310861-11.505618t33.558052-10.546816l-13.423221 50.816479q-5.752809 21.093633-10.546816 31.640449-9.588015 25.88764-22.531835 47.940075t-24.449438 38.35206q-13.423221 19.17603-27.805243 35.475655l-117.932584 35.475655 96.838951 17.258427q-19.17603 16.299625-41.228464 33.558052-19.17603 14.382022-43.625468 30.202247t-51.29588 29.243446-59.925094 13.902622-62.801498-4.314607q-34.516854-4.794007-69.033708-16.299625 10.546816-16.299625 23.011236-36.434457 10.546816-17.258427 25.40824-40.749064t31.161049-52.254682q46.022472-77.662921 89.168539-152.449438t77.662921-135.191011q39.310861-69.992509 75.745318-132.314607-45.06367 51.775281-94.921348 116.014981-43.146067 54.651685-95.88015 129.917603t-107.385768 164.434457q-11.505618 18.217228-25.88764 42.187266t-30.202247 50.816479-32.599251 55.131086-33.078652 55.131086q-38.35206 62.322097-78.621723 130.397004 0.958801-20.134831 7.670412-51.775281 5.752809-26.846442 19.17603-67.116105t38.35206-94.921348q16.299625-34.516854 24.928839-53.692884t13.423221-29.722846q4.794007-11.505618 7.670412-15.340824-4.794007-5.752809-1.917603-23.011236 1.917603-15.340824 11.026217-44.58427t31.161049-81.977528q22.052434-53.692884 58.007491-115.535581t81.018727-122.726592 97.797753-117.932584 107.865169-101.153558 110.262172-72.389513 106.906367-32.11985q0.958801 33.558052-6.71161 88.689139t-19.17603 117.932584-25.88764 127.520599-27.805243 117.453184z"
                p-id="2792"
                fill="#b550ff"
              ></path>
            </svg>
          </div>
        </template>
        Book</van-tabbar-item
      >
      <van-tabbar-item replace to="/my">
        <template>
          <div>
            <svg
              t="1668828840793"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="8177"
              width="20"
              height="20"
            >
              <path
                d="M512 576C371.2 576 256 460.8 256 320s115.2-256 256-256 256 115.2 256 256-115.2 256-256 256z m0-448C403.2 128 320 211.2 320 320s83.2 192 192 192 192-83.2 192-192-83.2-192-192-192z"
                fill="#b550ff"
                p-id="8178"
              ></path>
              <path
                d="M960 960h-64c0-211.2-172.8-384-384-384s-384 172.8-384 384H64c0-249.6 198.4-448 448-448s448 198.4 448 448z"
                fill="#b550ff"
                p-id="8179"
              ></path>
            </svg>
          </div>
        </template>
        user</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      active: 1,
      isshow: true,
    };
  },
  created(){
    console.log("vue",this.$store);
  },
  methods:{
    back(){
      this.$router.back()
    }
  },
  computed: {
    ...mapGetters(['getIsShowBack','gettitle']),
    key() {
      console.log('缓存的path', this.$route.fullPath);
      return this.$route.path.fullPath;
    },
  },
};
</script>
<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
#app {
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background-color: #f4f5f7;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
